{% import "post_macros.html" as post_macros %}

<!DOCTYPE html>
<html lang="{{ lang }}">
    <head>
        <meta charset="utf-8" />
        <meta name="referrer" content="no-referrer">

        <!-- Enable responsiveness on mobile devices-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5" />

        {% block title -%}
            {% if config.extra.subtitle %}
                <title>{{ config.title }} | {{ config.extra.subtitle }}</title>
            {% else %}
                <title>{{ config.title }}</title>
            {% endif %}
        <meta property="og:title" content="{{ config.title }}" />
        <meta name="twitter:title" content="{{ config.title }}" />
        {%- endblock title %}

        {% block description -%}
        {% if config.description -%}
        <meta name="description" content="{{ config.description }}">
        <meta property="og:description" content="{{ config.description }}">
        <meta name="twitter:description" content="{{ config.description | truncate(length=200) }}">
        {%- endif %}
        {%- endblock description %}

        {% block meta -%}
        <meta property="og:site_name" content="{{ config.title }}" />
        <meta property="og:url" content="{{ config.base_url }}" />
        {%- endblock meta %}

        {% block js -%}
        {% if config.extra.instantpage_enable -%}
        <script src="{{ get_url(path="js/instantpage.min.js") }}" type="module" defer></script>
        {%- endif %}
        {%- endblock js %}

        {% block css -%}
        <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
        <link rel="stylesheet" href="{{ get_url(path="base.css") }}" />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
        <link href="{{ get_url(path="fontawesome/fontawesome.css") }}" rel="stylesheet">
        <link href="{{ get_url(path="fontawesome/brands.css") }}" rel="stylesheet">
        <link href="{{ get_url(path="fontawesome/solid.css") }}" rel="stylesheet">
        {%- endblock css %}

        <link rel='icon' type='image/x-icon' href="{{ get_url(path="favicon.ico") }}" />

        {% if config.generate_feed -%}
        <link rel="alternate" type="application/atom+xml" title="{{ config.title }}" href="{{ get_url(path="atom.xml") }}">
        {%- endif %}

        {% if config.extra.katex_enable -%}
        <link rel="stylesheet" href="{{ get_url(path="css/katex.min.css") }}">
        <script defer src="{{ get_url(path="js/katex.min.js") }}"></script>
        <script defer src="{{ get_url(path="js/mathtex-script-type.min.js") }}"></script>
        {%- endif %}

        {% block extra_head -%}
        {%- endblock extra_head %}

    </head>
    <body>
        <a href="#main" class="skip-link p-screen-reader-text">Skip to content</a>
        {% block header -%}
        <header class="l-header">
            <h1 class="c-title p-title"><a href="{{ config.base_url }}" class="p-title__link">{{ config.title }}</a></h1>
            {% if config.extra.subtitle -%}
            <p class="p-subtitle">
                {{ config.extra.subtitle }}
            </p>
            {% endif -%}
        </header>
        {%- endblock header %}

        <main id="main" class="l-main">
            {% block content -%}
            {% for page in paginator.pages %}
            <article class="c-article p-list-article">
                {{ post_macros::title(page=page) }}
                <div class="c-article__summary">
                    {% if page.summary -%}
                    {{ page.summary | safe }}
                    {% else %}
                    {{ page.content | striptags | truncate(length=280) | safe }}
                    {%- endif %}
                </div>
                <a href="{{ page.permalink }}" class="c-article__btn p-list-article__btn">Read more...</a>
            </article>
            {% endfor %}

            <nav class="c-pagination p-pagination">
                <div class="c-pagination__ctrl">
                    <div class="c-pagination__newer">
                        {% if paginator.previous -%}
                        <a href="{{ paginator.previous }}">Newer</a>
                        {%- endif %}
                    </div>
                    <div class="c-pagination__older">
                        {% if paginator.next -%}
                        <a href="{{ paginator.next }}">Older</a>
                        {%- endif %}
                    </div>
                </div>
                <span class="c-pagination__count p-pagination__count">Page {{ paginator.current_index }} of {{ paginator.number_pagers }}</span>
            </nav>
            {%- endblock content %}
            {% block webring -%}
            {%- endblock webring %}
        </main>


      <footer class="l-footer">
          {% block footer -%}
          <p class="p-copyright">
              {% if config.extra.copyright -%}
              {% set content = config.extra.copyright | markdown(inline=true) %}
              {{ content | safe }}
              {%- endif %}
          </p>
          {%- endblock footer %}
      </footer>

      {% if config.extra.analytics -%}
      <!-- Global site tag (gtag.js) - Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id={{ config.extra.analytics }}"></script>
      <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', '{{ config.extra.analytics }}');
      </script>
      {%- endif %}
    </body>
</html>

